<template>
  <div class="app-container" v-loading="formLoading">
    <div class="content_top">
      <div class="title">
        <tooltip :text="form.courseName" width="100%"></tooltip>
      </div>
      <el-button
        v-if="form.finishStatus != 1"
        class="move_btn"
        type="primary"
        @click="handleEditDialog"
      >编辑
      </el-button
      >
    </div>
    <div class="content_top">
      <div class="title">
        <tooltip
          :text="form.schedulingName + '授课班级'"
          width="100%"
        ></tooltip>
      </div>
    </div>
    <div class="content_mid">
      <div class="card">
        <div class="top">
          <div class="round"></div>
          <div class="title">基本信息</div>
        </div>
        <div class="bottom">
          <div class="item">
            <div class="label">班级人数(人)</div>
            <div class="value">{{ form.stuNum ? form.stuNum : 0 }}</div>
          </div>
          <div class="item">
            <div class="label">班级平均进度(%)</div>
            <div class="value">{{ form.schedulingAvgLearningProgress }}%</div>
          </div>
          <div class="item">
            <div class="label">班级平均成绩(本课程)/课程平均成绩(分)</div>
            <div class="value">
              {{ form.schedulingAvgScore }}/{{ form.courseAvgScore }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_bottom">
      <transition name="fade-transform" mode="out-in">
        <div class="">
          <div class="search_collect">
            <el-form
              :model="searchParams"
              ref="searchForm"
              size="small"
              :inline="true"
              label-width="68px"
            >
              <el-form-item label="学生" prop="nameOrNum">
                <el-input
                  v-model="searchParams.nameOrNum"
                  placeholder="请输入学生姓名/学号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="行政班" prop="classId">
                <el-select
                  filterable
                  v-model="searchParams.classId"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="item in classList"
                    :key="item.classId"
                    :label="item.className"
                    :value="item.classId"
                  />
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button
                  v-preventReClick
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                >搜索
                </el-button
                >
                <el-button
                  v-preventReClick
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery('searchForm')"
                >重置
                </el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <el-table
            height="calc(100vh - 500px)"
            v-loading="studentLoading"
            :data="studentList"
          >
            <el-table-column
              fixed
              label="学号"
              width="100"
              show-overflow-tooltip
              align="center"
              prop="studentNum"
            />

            <el-table-column
              fixed
              label="姓名"
              width="100"
              show-overflow-tooltip
              align="center"
              prop="studentName"
            />
            <el-table-column
              show-overflow-tooltip
              label="分院"
              align="center"
              prop="branchName"
            />
            <el-table-column
              show-overflow-tooltip
              label="专业"
              align="center"
              prop="majorName"
            />
            <el-table-column
              show-overflow-tooltip
              label="行政班"
              align="center"
              prop="className"
            />
            <el-table-column width="60" label="性别" align="center" prop="sex">
              <template slot-scope="scope">
                {{ scope.row.sex == 0 ? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="状态"
              align="center"
              prop="status"
            >
              <template slot-scope="scope">
                <el-switch
                  @change="handleSwitch(scope.row)"
                  :active-value="0"
                  :inactive-value="1"
                  :value="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="150"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  v-preventReClick
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleDetail(scope.row)"
                >
                  详情
                </el-button>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-button slot="reference" type="text" size="mini"
                    >更多<i class="el-icon-arrow-down"></i
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <div @click="handleUpdate(scope.row)">
                        <el-button
                          v-preventReClick
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                        >
                          编辑
                        </el-button>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        v-preventReClick
                        size="mini"
                        type="text"
                        icon="el-icon-refresh"
                        @click="handleReset(scope.row)"
                      >
                        重置密码
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="handleDelete(scope.row)">
                        <el-button
                          v-if="scope.row.status == 1"
                          v-preventReClick
                          size="mini"
                          type="text"
                          style="color: #e95756"
                          icon="el-icon-delete"
                        >删除
                        </el-button
                        >
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="studentTotal > 0"
            :total="studentTotal"
            :page.sync="searchParams.pageNum"
            :limit.sync="searchParams.pageSize"
            @pagination="getStudentList"
          />
        </div>
      </transition>
    </div>
    <updateStudentDialog
      :open.sync="open"
      :openType="openType"
      :studentForm="studentForm"
      @refresh="getStudentList"
    ></updateStudentDialog>
    <!--  添加|修改  授课班级弹窗  -->
    <addTeachingDialog
      :dialog-visible.sync="dialogVisible"
      :courseInfo="courseInfo"
      :teachingDetial="teachingDetial"
      :classTeachingId="classTeachingId"
      :openType="teachingOpenType"
      @refresh="refreshData"
    ></addTeachingDialog>
  </div>
</template>

<script>
import {
  getCourseSchedulingInfo,
  getStudentListByScheduling,
  getClassListByScheduling
} from '@/api/teach/teach'
import {
  addPost_resetPwd,
  delPost_student,
  addPost_changeStatus
} from '@/api/schoolOrganization/student'
import updateStudentDialog from './components/updateStudentDialog'
import addTeachingDialog from '../teachIndex/compontents/addTeachingDialog'

export default {
  name: 'classTeachingDetial',
  components: {
    updateStudentDialog,
    addTeachingDialog
  },
  data() {
    return {
      branchId: '',
      classTeachingId: '',
      schoolSemesterId: '',
      //添加|修改  授课班级弹窗
      dialogVisible: false,
      teachingOpenType: '',
      courseInfo: {
        courseId: '',
        courseName: '',
        courseType: ''
      },
      //添加|编辑  学生
      studentForm: null,
      openType: 1,
      open: false,
      studentLoading: false,
      // 总条数
      studentTotal: 0,
      studentList: [],
      classList: [],
      // 查询参数
      searchParams: {
        nameOrNum: '',
        classId: '',
        pageNum: 1,
        pageSize: 10
      },
      formLoading: false,
      teachingDetial: {},
      // 详情
      form: {
        classTeachingName: '',
        stuNum: '--',
        studiedCourseNum: '--',
        studyingCourseNum: '--',
        studentIdList: []
      }
    }
  },
  watch: {},
  mounted() {
  },
  created() {
    this.classTeachingId = this.$route.query.id
    this.branchId = this.$route.query.branchId
    this.schoolSemesterId = this.$route.query.schoolSemesterId
    this.getInfo()
    this.getClassList()
    this.getStudentList()
  },
  methods: {
    refreshData() {
      this.getInfo()
      this.getStudentList()
    },
    handleEditDialog() {
      this.courseInfo = {
        courseId: this.form.courseId,
        courseName: this.form.courseName,
        courseType: this.form.courseType,
        branchId: this.branchId,
        semesterId: this.schoolSemesterId
      }
      this.teachingDetial = {
        ...this.form
      }
      this.teachingOpenType = 2
      this.dialogVisible = true
    },

    //编辑
    handleUpdate(row) {
      this.studentForm = row
      this.open = true
      this.openType = 2
    },
    // 详情
    handleDetail(row) {
      this.$router.push({
        path: '/schoolOrganization/studentDetail',
        query: {
          studentId: row.studentId
        }
      })
    },
    // 停用启用
    handleSwitch(row) {
      let newstatus
      const postIds = row.studentId
      if (row.status == 0) {
        this.$confirm(
          `停用后，学生会退出所在班级，并清空全部学习中记录，是否确认停用?`,
          '停用确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(async() => {
            newstatus = 1
            this.changeStatus(postIds, newstatus)
          })
          .catch(() => {
            this.$modal.msgInfo('已取消')
          })
      } else {
        newstatus = 0
        this.changeStatus(postIds, newstatus)
      }
    },
    async changeStatus(postIds, newstatus) {
      let formData = new FormData()
      formData.append('studentIds', postIds)
      formData.append('status', newstatus)
      let loading = this.$loading({
        lock: true,
        text: '修改中…',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.3)'
      })
      try {
        let res = await addPost_changeStatus(formData)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('修改状态成功')
          this.getStudentList()
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    // 删除
    handleDelete(row) {
      const postIds = row.studentId
      this.$modal
        .confirm('是否确认删除？')
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '删除中…',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.3)'
          })
          try {
            let res = await delPost_student(postIds)
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('删除成功')
              this.getStudentList()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    // 重置密码
    handleReset(row) {
      const postIds = row.studentId
      this.$modal
        .confirm('是否确认重置密码？')
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '重置密码中…',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.3)'
          })
          try {
            let res = await addPost_resetPwd(postIds)
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('重置密码成功')
              this.getStudentList()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.searchParams.pageNum = 1
      this.getStudentList()
    },
    /** 重置按钮操作 */
    resetQuery(form) {
      this.resetForm(form)
      this.handleQuery()
    },
    // 获取学生列表
    async getStudentList() {
      try {
        this.studentLoading = true
        let params = {
          ...this.searchParams
        }
        let res = await getStudentListByScheduling(
          this.classTeachingId,
          params
        )
        const { code, rows } = res
        if (code == 200) {
          this.studentList = rows
          this.studentTotal = res.total
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.studentLoading = false
      }
    },
    // 获取详情
    async getInfo() {
      this.formLoading = true
      try {
        let res = await getCourseSchedulingInfo(this.classTeachingId)
        const { code, data } = res
        console.log('获取详情', data)
        if (code == 200) {
          this.form = data
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.formLoading = false
      }
    },
    async getClassList() {
      try {
        let res = await getClassListByScheduling(this.classTeachingId)
        const { code, data } = res
        if (code == 200) {
          this.classList = data
        }
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .content_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .title {
      flex: 1;
    }

    .edit_btn {
      width: 80px;
      margin-left: 20px;
    }

    .move_btn {
      width: 100px;
      margin-left: 20px;
    }
  }

  .content_mid {
    width: 100%;
    display: flex;
    justify-content: flex-start;

    .card {
      border-radius: 8px;
      background: white;
      box-shadow: 0 0 12px rgba(99, 99, 99, 0.14);
      box-sizing: border-box;
      padding: 16px 20px;

      .top {
        display: flex;
        align-items: center;

        .round {
          width: 10px;
          height: 10px;
          background: #2cacff;
          border-radius: 50%;
          margin-right: 8px;
        }

        .title {
          font-size: 14px;
          color: #333333;
        }
      }

      .bottom {
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 0 24px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 5px 0;

          .label {
            font-size: 14px;
            color: #999999;
          }
        }
      }
    }
  }

  .content_bottom {
    margin-top: 20px;
  }
}

// 章节信息盒子
.taskInfoBox {
  .topLine {
    box-sizing: border-box;
    padding-left: 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 45px;
  }

  .box {
    height: calc(100vh - 330px);
  }
}

.taskListBox {
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &_title {
    box-sizing: border-box;
    padding: 0 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;

    .courseName {
      width: 180px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 45px;
    }

    .allExpand {
      user-select: none;

      img {
        margin: auto 4px auto 0;
        width: 16px;
        height: 16px;
      }

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
    }
  }
}
</style>
